import * as React from 'react';


export interface ToolbarProps {
    primaryClassName?: string;
    secondaryClassName?: string;
    primary?: React.ReactNode | React.ReactFragment;
    secondary?: React.ReactNode | React.ReactFragment;
}

export interface ToolbarState {

}

export class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
    render() {
        return (
            <div className="media-toolbar">
                {this.renderPrimary()}
                {this.renderSecondary()}
            </div>
        );
    }

    renderPrimary() {
        if (this.props.primary) {
            let className = "media-toolbar-primary";
            if (this.props.primaryClassName) {
                className += ' ' + this.props.primaryClassName;
            }
            return (
                <div className={className}>
                    {this.props.primary}
                </div>
            )
        }
    }

    renderSecondary() {
        if (this.props.secondary) {
            let className = "media-toolbar-secondary";
            if (this.props.secondaryClassName) {
                className += ' ' + this.props.secondaryClassName;
            }
            return (
                <div className={className}>
                    {this.props.secondary}
                </div>
            )
        }
    }
}
